<template>
	<view class="module">
		<!-- <uNavbar title="遗迹奖励" bgColor="transparent" :titleStyle="titleStyle" leftIconColor="#ffffff"></uNavbar> -->
		<view class="back flex_c">
			<image src="../../static/icon/left_jt.png" mode="aspectFill" @click="goBack"></image>
			<text>遗迹奖励</text>
		</view>
		<view >
			<rich-text class="quanyi" :nodes="nodeCentent"></rich-text>
		</view>
	</view>
<!-- 	<view class="module">
		<uNavbar title="" bgColor="transparent"></uNavbar>
		<view class="realm_tit flex_ZC">
			<text>秘境奖励</text>
			<view class="exclusive">
				<text>大唐盛世专属秘境奖励</text>
			</view>
		</view>
		<view class="condition">
				<text class="xhtj">消耗条件</text>
				<text class="xhtj2">FUL凭购劵2</text>
				<text class="wbcp">挖宝藏品</text>
				<text class="wbcp2">亭长</text>
				<view class="jiangji flex_Z">
					<text class="f30">奖励:xxxxx道具劵</text>
					<text class="f30">活动时间:</text>
					<text class="f28">2024年6月13日10:00-2024年6月30日23:59</text>
				</view>
				<image class="collection" src="../../static/image/bg6.png" mode=""></image>
		</view>
	</view> -->
</template>

<script>
	import {brandDetail} from "../../api/secretRealm.js";
	export default {
		data() {
			return {
				titleStyle: {
					color: '#ffffff'
				},
				brandAll:{},
				nodeCentent:''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.initDetail()
		},
		methods: {
			// 初始化
			initDetail() {
				let data = {
					id:this.id,
				}
				brandDetail(data).then(res => {
					console.log(11111,res);
					if (res.code == 1) {
						this.brandAll = res.data
						var htmlContent = res.data.content
						const regex = new RegExp('<img', 'gi');
						htmlContent = htmlContent.replace(regex, `<img style="max-width: 100%;"`)
						this.nodeCentent = htmlContent;
					}
				})
			},
			goBack() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	.back {
		position: fixed;
		top: 30rpx;
		/* #ifdef APP */
		top: 60rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.back>text {
		/* #ifdef H5 */
		font-size: 28rpx;
		/* #endif */
		
		/* #ifdef APP */
		font-size: 32rpx;
		/* #endif */
		color: #ffffff;
	}

	.back>image {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}
.module{
	position: relative;
	width: 750rpx;
	height: 100vh;
}
.module>image{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	/* opacity: 0.7; */
}
	.realm_tit {
		width: 100%;
		margin-top: 220rpx;
	}

	.realm_tit>text {
		font-size: 140rpx;
		color: #ffffff;
		font-family: 'iconfont';
	}
	.exclusive{
		padding: 6px 30rpx;
		font-size: 40rpx;
		color: #1C166C;
		background-size: 100% 100%;
		font-family: 'iconfont';
		margin-top: 20rpx;
	}

	.xhtj{
		position: absolute;
		top: 174rpx;
		left: 100rpx;
		font-size: 32rpx;
		color: #ffffff;
		
		font-family: 'iconfont';
	}
	.xhtj2{
		position: absolute;
		top: 240rpx;
		left: 100rpx;
		font-size: 30rpx;
		color: #ffffff;
	}
	.wbcp{
		position: absolute;
		top: 330rpx;
		left: 100rpx;
		font-size: 32rpx;
		color: #ffffff;
		font-family: 'iconfont';
	}
	.wbcp2{
		position: absolute;
		top: 390rpx;
		left: 100rpx;
		font-size: 32rpx;
		color: #ffffff;
	}
	.collection{
		position: absolute;
		top: 200rpx;
		right: 100rpx;
		font-size: 30rpx;
		color: #ffffff;
		width: 168rpx;
		height: 168rpx;
		border-radius: 10rpx;
	}
	.jiangji{
		position: absolute;
		top: 500rpx;
		left: 100rpx;
		color: #ffffff;
		/* font-size: 30rpx; */
	}
	.jiangji>text{
		margin: 4rpx 0;
	}
	
</style>